<link rel="stylesheet" href="__CDN__/assets/css/bootstrap.min.css"/>
<link rel="stylesheet" href="__CDN__/assets/css/fastadmin.min.css"/>
<link rel="stylesheet" href="__CDN__/assets/libs/font-awesome/css/font-awesome.min.css"/>
<style type="text/css">
    body {
        margin: 0;
        padding: 0;
    }

    #container {
        /*position: relative;*/
        /*left: 0;*/
        /*top: 0;*/
        /*right: 0;*/
        /*bottom: 0;*/
        width: 100%;
        height: 300px;
    }

    /*.confirm {*/
    /*    position: absolute;*/
    /*    bottom: 30px;*/
    /*    right: 4%;*/
    /*    !*z-index: 99;*!*/
    /*    height: 50px;*/
    /*    width: 50px;*/
    /*    line-height: 50px;*/
    /*    font-size: 15px;*/
    /*    text-align: center;*/
    /*    background-color: white;*/
    /*    background: #1ABC9C;*/
    /*    color: white;*/
    /*    border: none;*/
    /*    cursor: pointer;*/
    /*    border-radius: 50%;*/
    /*}*/

    /*.search {*/
    /*    !*position: absolute;*!*/
    /*    width: 100px;*/
    /*    top: 0;*/
    /*    !*left: 50%;*!*/
    /*    padding: 5px;*/
    /*    margin-left: -200px;*/
    /*}*/
</style>
<style type="text/css">
    @media (max-width: 375px) {
        .edit-form tr td input {
            width: 100%;
        }

        .edit-form tr th:first-child, .edit-form tr td:first-child {
            width: 20%;
        }

        .edit-form tr th:nth-last-of-type(-n+2), .edit-form tr td:nth-last-of-type(-n+2) {
            display: none;
        }
    }

    .edit-form table > tbody > tr td a.btn-delcfg {
        visibility: hidden;
    }

    .edit-form table > tbody > tr:hover td a.btn-delcfg {
        visibility: visible;
    }
</style>
<div class="panel panel-default panel-intro">
    <div class="panel-heading">
        <ul class="nav nav-tabs">
            <li class="active"><a href="#basic" data-toggle="tab">基础配置</a></li>
<!--            <li class="active"><a href="#about" data-toggle="tab">关于我们</a></li>-->
        </ul>
    </div>

    <div class="panel-body">
        <div id="myTabContent" class="tab-content">
            <div class="tab-pane fade active in" id="basic">
                <div class="widget-body no-padding">
                    <form id="basic-form" class="edit-form form-horizontal nice-validator n-default n-bootstrap" role="form" data-toggle="validator" method="POST" action="/administration.php/choi.config/basic" novalidate="novalidate">
<!--                        <input type="hidden" name="__token__" value="bd4a631a143be6c83ce1c6afc8990226">                        -->
                        <table class="table table-striped">
                            <tbody>
                            <tr>
                                <td>站点名称</td>
                                <td>
                                    <div class="row">
                                        <div class="col-sm-8 col-xs-12">
                                            <input type="text" name="row[name]" value="{$content.name}" class="form-control" data-tip="请填写站点名称">
                                        </div>
                                        <div class="col-sm-4"></div>
                                    </div>
                                </td>
                            </tr>
                            <tr>
                                <td>站点标题</td>
                                <td>
                                    <div class="row">
                                        <div class="col-sm-8 col-xs-12">
                                            <input type="text" name="row[title]" value="{$content.title}" class="form-control" data-rule="" data-tip="请填写站点标题">
                                        </div>
                                        <div class="col-sm-4"></div>
                                    </div>
                                </td>
                            </tr>
                            <tr>
                                <td>站点关键词</td>
                                <td>
                                    <div class="row">
                                        <div class="col-sm-8 col-xs-12">
                                            <input type="text" name="row[keywords]" value="{$content.keywords}" class="form-control" data-rule="" data-tip="请填写站点关键词">
                                        </div>
                                        <div class="col-sm-4"></div>
                                    </div>
                                </td>
                            </tr>
                            <tr>
                                <td>站点描述</td>
                                <td>
                                    <div class="row">
                                        <div class="col-sm-8 col-xs-12">
<!--                                            <input type="text" name="row[description]" value="{$content.description}" class="form-control" data-tip="请填写站点描述">-->
                                            <textarea id="c-description" data-rule="" data-tip="请填写站点描述" class="form-control " rows="5" name="row[description]" cols="50">{$content.description}</textarea>
                                        </div>
                                        <div class="col-sm-4"></div>
                                    </div>
                                </td>
                            </tr>
                            <tr>
                                <td>邮箱Email</td>
                                <td>
                                    <div class="row">
                                        <div class="col-sm-8 col-xs-12">
                                            <input type="text" name="row[email]" value="{$content.email}" class="form-control" data-tip="请填写邮箱Email">
                                        </div>
                                        <div class="col-sm-4"></div>
                                    </div>
                                </td>
                            </tr>
                            <tr>
                                <td>联系人</td>
                                <td>
                                    <div class="row">
                                        <div class="col-sm-8 col-xs-12">
                                            <input type="text" name="row[username]" value="{$content.username}" class="form-control" data-tip="请填写联系人">
                                        </div>
                                        <div class="col-sm-4"></div>
                                    </div>
                                </td>
                            </tr>
                            <tr>
                                <td>QQ</td>
                                <td>
                                    <div class="row">
                                        <div class="col-sm-8 col-xs-12">
                                            <input type="text" name="row[qq]" value="{$content.qq}" class="form-control" data-tip="请填写QQ号">
                                        </div>
                                        <div class="col-sm-4"></div>
                                    </div>
                                </td>
                            </tr>
                            <tr>
                                <td>QQ二维码</td>
                                <td>
                                    <div class="row">
                                        <div class="col-sm-8 col-xs-12">
                                            <div class="input-group">
                                                <input id="c-qq_code" data-rule="" class="form-control" size="50" name="row[qq_code]" type="text" value="{$content.qq_code}">
                                                <div class="input-group-addon no-border no-padding">
                                                    <span><button type="button" id="plupload-file" class="btn btn-danger plupload" data-input-id="c-qq_code" data-mimetype="image/gif,image/jpeg,image/png,image/jpg,image/bmp" data-multiple="false" data-preview-id="p-file"><i class="fa fa-upload"></i> {:__('Upload')}</button></span>
                                                    <span><button type="button" id="fachoose-file" class="btn btn-primary fachoose" data-input-id="c-qq_code" data-mimetype="image/*" data-multiple="false"><i class="fa fa-list"></i> {:__('Choose')}</button></span>
                                                </div>
                                                <span class="msg-box n-right" for="c-image"></span>
                                            </div>
                                            <ul class="row list-inline plupload-preview" id="p-file"></ul>
                                        </div>
                                        <div class="col-sm-4"></div>
                                    </div>
                                </td>
                            </tr>
                            <tr>
                                <td>公众号二维码</td>
                                <td>
                                    <div class="row">
                                        <div class="col-sm-8 col-xs-12">
                                            <div class="input-group">
                                                <input id="c-account_code" data-rule="" class="form-control" size="50" name="row[account_code]" type="text" value="{$content.account_code}">
                                                <div class="input-group-addon no-border no-padding">
                                                    <span><button type="button" id="plupload-image" class="btn btn-danger plupload" data-input-id="c-account_code" data-mimetype="image/gif,image/jpeg,image/png,image/jpg,image/bmp" data-multiple="false" data-preview-id="p-image"><i class="fa fa-upload"></i> {:__('Upload')}</button></span>
                                                    <span><button type="button" id="fachoose-image" class="btn btn-primary fachoose" data-input-id="c-account_code" data-mimetype="image/*" data-multiple="false"><i class="fa fa-list"></i> {:__('Choose')}</button></span>
                                                </div>
                                                <span class="msg-box n-right" for="c-image"></span>
                                            </div>
                                            <ul class="row list-inline plupload-preview" id="p-image"></ul>
                                        </div>
                                        <div class="col-sm-4"></div>
                                    </div>
                                </td>
                            </tr>
                            <tr>
                                <td>固话、手机号</td>
                                <td>
                                    <div class="row">
                                        <div class="col-sm-8 col-xs-12">
                                            <input type="text" name="row[mobile]" value="{$content.mobile}" class="form-control" data-tip="请填写固话、手机号">
                                        </div>
                                        <div class="col-sm-4"></div>
                                    </div>
                                </td>
                            </tr>
                            <tr>
                                <td>备案号</td>
                                <td>
                                    <div class="row">
                                        <div class="col-sm-8 col-xs-12">
                                            <input type="text" name="row[beian]" value="{$content.beian}" class="form-control" data-rule="" data-tip="粤ICP备XXXXXXX">
                                        </div>
                                        <div class="col-sm-4"></div>
                                    </div>
                                </td>
                            </tr>
                            <tr>
                                <td>地址</td>
                                <td>
                                    <div class="row">
                                        <div class="col-sm-8 col-xs-12">
                                            <input type="text" id="place" class="form-control" name="row[address]" value="{$content.address}" class="form-control" data-tip="请填写地址">                                        </div>
                                        <div class="col-sm-4"></div>
                                    </div>
                                </td>
                            </tr>
<!--                            <tr>-->
<!--                                <td>地址</td>-->
<!--                                <td>-->
<!--                                    <div class="search">-->
<!--                                        <div class="input-group">-->
<!--                                            <input type="hidden" id="lat" name="lat" value="">-->
<!--                                            <input type="hidden" id="lang" name="lang" value="">-->
<!--                                        </div>-->
<!--                                    </div>-->
<!--                                    <div id="container"></div>-->
<!--                                </td>-->
<!--                            </tr>-->
                            </tbody>
                            <tfoot>
                            <tr>
                                <td></td>
                                <td>
                                    <button type="submit" class="btn btn-success btn-embossed">确定</button>
                                    <button type="reset" class="btn btn-default btn-embossed">重置</button>
                                </td>
                            </tr>
                            </tfoot>
                        </table>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>
<script charset="utf-8" src="//map.qq.com/api/js?v=2.exp&libraries=place&key=ZH2BZ-37U6D-MEI42-HEP3W-YSAPO-N6B2U"></script>
<script src="__CDN__/assets/libs/jquery/dist/jquery.min.js"></script>
<script type="text/javascript">
    $(function () {
        var map, marker, geocoder, infoWin, searchService, address = null;
        var init = function () {
            var center = new qq.maps.LatLng('23.22158', '113.27118');
            map = new qq.maps.Map(document.getElementById('container'), {
                center: center,
                zoom: parseInt(12)
            });
            //初始化marker
            initmarker(center);

            //实例化信息窗口
            infoWin = new qq.maps.InfoWindow({
                map: map
            });
            geocoder = new qq.maps.Geocoder({
                complete: function (result) {
                    infoWin.open();
                    address = result.detail.addressComponents.province +
                        result.detail.addressComponents.city +
                        result.detail.addressComponents.district;
                    if (result.detail.addressComponents.streetNumber == '') {
                        address += result.detail.addressComponents.street;
                    } else {
                        address += result.detail.addressComponents.streetNumber;
                    }
                    infoWin.setContent(address);
                    infoWin.setPosition(result.detail.location);
                }
            });
            //显示当前marker的位置信息窗口
            geocoder.getAddress(center);

            var latlngBounds = new qq.maps.LatLngBounds();
            //查询poi类信息
            searchService = new qq.maps.SearchService({
                complete: function (results) {
                    var pois = results.detail.pois;
                    for (var i = 0, l = pois.length; i < l; i++) {
                        var poi = pois[i];
                        latlngBounds.extend(poi.latLng);
                        initmarker(poi.latLng);
                        //显示当前marker的位置信息窗口
                        geocoder.getAddress(poi.latLng);
                    }
                    map.fitBounds(latlngBounds);
                }
            });
            //实例化自动完成
            var ap = new qq.maps.place.Autocomplete(document.getElementById('place'));
            //添加监听事件
            qq.maps.event.addListener(ap, "confirm", function (res) {
                searchKeyword();
            });
            qq.maps.event.addListener(
                map,
                'click',
                function (event) {
                    try {
                        infoWin.setContent('<div style="text-align:center;white-space:nowrap;margin:10px;">加载中</div>');
                        var latLng = event.latLng,
                            lat = latLng.getLat().toFixed(5),
                            lng = latLng.getLng().toFixed(5);
                        var location = new qq.maps.LatLng(lat, lng);
                        //调用获取位置方法
                        geocoder.getAddress(location);
                        infoWin.setPosition(location);
                        marker.setPosition(location);
                    } catch (e) {
                        console.log(e);
                    }
                }
            );
        };

        //实例化marker和监听拖拽结束事件
        var initmarker = function (latLng) {
            marker = new qq.maps.Marker({
                map: map,
                position: latLng,
                draggable: true,
                title: '拖动图标选择位置'
            });
            //监听拖拽结束
            qq.maps.event.addListener(marker, 'dragend', function (event) {
                var latLng = event.latLng,
                    lat = latLng.getLat().toFixed(5),
                    lng = latLng.getLng().toFixed(5);
                var location = new qq.maps.LatLng(lat, lng);
                //调用获取位置方法
                geocoder.getAddress(location);
            });
        };
        var close = function (data) {
            var index = parent.Layer.getFrameIndex(window.name);
            var callback = parent.$("#layui-layer" + index).data("callback");
            //再执行关闭
            parent.Layer.close(index);
            //再调用回传函数
            if (typeof callback === 'function') {
                callback.call(undefined, data);
            }
        };

        //执行搜索方法
        var searchKeyword = function () {
            searchService.clear();//先清除
            marker.setMap(null);
            infoWin.close();
            var keyword = $("#place").val();
            searchService.setLocation("广州");//设置默认检索范围（默认为全国），类型可以是坐标或指定的城市名称。
            searchService.setPageIndex(0);//设置检索的特定页数。
            searchService.setPageCapacity(1);//设置每页返回的结果数量。
            searchService.search(keyword);//开始查询

            var as = marker.getPosition();
            var x = as.getLat().toFixed(5);
            var y = as.getLng().toFixed(5);
            var zoom = map.getZoom();
            var data = {lat: x, lng: y, zoom: zoom, address: address};
            // $('#lat').val(x);
            // $('#lang').val(y);
            close(data);
        };

        //点击确定后执行回调赋值
        $(document).on('click', '.confirm', function () {
            var as = marker.getPosition();
            var x = as.getLat().toFixed(5);
            var y = as.getLng().toFixed(5);
            var zoom = map.getZoom();
            var data = {lat: x, lng: y, zoom: zoom, address: address};
            close(data);
        });

        //点击搜索按钮
        // $(document).on('click', '#search-btn', function () {
        //     if ($("#place").val() == '')
        //         return;
        //     searchKeyword();
        // });
        $(document).on('change', '#place', function () {
            if ($("#place").val() == '')
                return;
            searchKeyword();
        });


        init();
    });
</script>
